<template>
  <div class="demo">
    <div class="demo-title">目录</div>
    <div class="demo-content">
      <Tree.DirectoryTree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        multiple
        :tree-data="treeData"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Tree from '@sscd/tree';
  import type { TreeProps } from '@sscd/tree';
  const expandedKeys = ref<string[]>(['0-0', '0-1']);
  const selectedKeys = ref<string[]>([]);
  const treeData: TreeProps['treeData'] = [
    {
      title: 'parent 0',
      key: '0-0',
      children: [
        {
          title: 'leaf 0-0',
          key: '0-0-0',
          isLeaf: true,
        },
        {
          title: 'leaf 0-1',
          key: '0-0-1',
          isLeaf: true,
        },
      ],
    },
    {
      title: 'parent 1',
      key: '0-1',
      children: [
        {
          title: 'leaf 1-0',
          key: '0-1-0',
          isLeaf: true,
        },
        {
          title: 'leaf 1-1',
          key: '0-1-1',
          isLeaf: true,
        },
      ],
    },
  ];
</script>
